<template>
        <div class="customVueNode">
            <img :src="state.data.image" alt="" class="icon">
            <div class="right">
                <div class="name">{{state.data.label}}</div>
            </div>
            <div class="tool">
                <button type="primary" size="small" @click="toExchange">{{state.computedText}}</button>
                <div></div>
                <!-- <el-switch v-model="state.data.open" :active-value="true" :inactive-value="false" @change="dataChange">
                </el-switch> -->
            </div>
        </div>
</template>
<script>
    import { computed, inject, onMounted, reactive, getCurrentInstance, ref } from 'vue'
    import Vue from 'vue'
    export default {
        inject:['getNode'],
        setup(props,context) {
            const {proxy:_this} = getCurrentInstance()
            const getNode = _this.getNode
            const dataChange = () => {
                Vue.__X6Funs.changeData(state.data,state.node)
            }
            const toExchange = () => {
                if(!state.refreshData.some(item => item.id === state.data.id)) {
                    Vue.__X6Funs.setRefreshData(state.node)
                }
            }
            const state = reactive({
                data: { open: false },
                node: null,
                refreshData: [],
                computedText: ''
            })
            // const computedText = computed(() => {
            //     return !state.refreshData.length ? '选择': state.refreshData.some(item => item.id === state.node.id) ? '已选' : '交换'
            // })
            onMounted(() => {
                const node = getNode()
                state.node = node;
                state.refreshData = node.data.refreshData || []
                state.data = {
                    open: false,
                    ...node.data,
                }
                state.computedText = !state.refreshData.length ? '选择': state.refreshData.some(item => item.id === state.node.id) ? '已选' : '交换'
                node.on('change:data', ({current}) => {
                    console.log('change',current)
                    state.refreshData = current.refreshData || []
                    state.data = {
                        open: false,
                        ...current,
                    }
                    state.computedText = !state.refreshData.length ? '选择': state.refreshData.some(item => item.id === state.node.id) ? '已选' : '交换'
                })
            })
            return {
                state,toExchange,dataChange
            }
        }
    }
</script>

<style lang='scss'>
.customVueNode {
    // border: 1px solid #5F9500;
    // background-color: #5F95F0;
    padding: 0 10px;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    .tool {
        position: absolute;
        right: -50px;
        top: 0;
    }
     $s: 25px;
    .icon {
        width: $s;
        height: $s;
        display: block;
        margin: 0 auto;
        object-fit: cover;
    }
    .name {
        font-size: 12px;
        font-weight: 600;
        color: #333;
        white-space: nowrap;
    }
}
</style>